<template>
  <div>
    <el-card class="box-card">
      <el-steps :space="500" :active="active" finish-status="success">
        <el-step title="注意事项"></el-step>
        <el-step title="工具选择"></el-step>
        <el-step title="条件输入"></el-step>
        <el-step title="计算数值"></el-step>
        <el-step title="选型结果"></el-step>
      </el-steps>
    </el-card>

    <el-card class="box-card matters" v-if="showMatters">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>阅读注意事项</span>
          <el-button style="float: right;padding: 3px 0" type="text" @click="goHome">返回系统首页</el-button>
        </div>
        <div class="text item">
          使用三谷工具库系统选型工具（以下称为”本工具”）时，请务必阅读并同意以下使用注意事项和免责事项：<br>
          如不想同意，请勿使用本工具。<br><br>
          使用注意事项和免责事项如下：<br>
          1. 由本工具算出的计算结果全部为参考值，本系统不能保证准确性，仅供参考。<br>
          2. 对使用本工具或其计算结果后，使用者或第三方发生的损害、不利、故障不负责。<br>
          3. 关于本工具，可能无预告地进行更改或删除。<br>
          4. 其他未尽事宜以最新声明为准。
        </div>
      </el-card>

      <div style="margin-top: 20px" class="matters">
        <el-checkbox v-model="agreed">我同意注意事项</el-checkbox>
        <el-button type="primary" style="margin-left: 10px" :disabled="!agreed" @click="start">开始选型</el-button>
      </div>
    </el-card>

    <div v-if="!showMatters">
      <el-card class="box-card">
        <h1>工具选择：点击图片进入下一页</h1>
      </el-card>

      <el-card class="box-card">
        <div class="image-grid">
          <div
              v-for="(image, index) in images"
              :key="index"
              class="image-item"
              @mouseover="hoverImage(index)"
              @mouseleave="leaveImage(index)"
              @click="goToLink(image.link)"
          >
            <img :src="image.src" :alt="image.alt" />
                      <div class="image-text">{{ image.text }}</div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "Calculation" ,//计算书
  data() {
    return {
      active: 0,
      showMatters: true,
      agreed: false, //初始未勾选
      hoveredIndex: null,
      images: [
        { src: require('@/assets/calculation/计算器.png'), alt: '张普赫计算书', text: '张普赫计算书', link: '/zhangpuhe' },
        { src: require('@/assets/calculation/计算器.png'), alt: '工具2', text: '工具2', link: `${process.env.VUE_APP_BASEURL || 'https://unit.sangu.js.cn:8888'}/file/download?type=preview&id=367` },
        { src: require('@/assets/calculation/计算器.png'), alt: '工具3', text: '工具3', link: `${process.env.VUE_APP_BASEURL || 'https://unit.sangu.js.cn:8888'}/file/download?type=preview&id=367` },
        { src: require('@/assets/calculation/计算器.png'), alt: '工具4', text: '工具4', link: `${process.env.VUE_APP_BASEURL || 'https://unit.sangu.js.cn:8888'}/file/download?type=preview&id=367` },
        { src: require('@/assets/calculation/计算器.png'), alt: '工具5', text: '工具5', link: `${process.env.VUE_APP_BASEURL || 'https://unit.sangu.js.cn:8888'}/file/download?type=preview&id=367` },
        { src: require('@/assets/calculation/计算器.png'), alt: '工具6', text: '工具6', link: `${process.env.VUE_APP_BASEURL || 'https://unit.sangu.js.cn:8888'}/file/download?type=preview&id=367` },
        { src: require('@/assets/calculation/计算器.png'), alt: '工具7', text: '工具7', link: `${process.env.VUE_APP_BASEURL || 'https://unit.sangu.js.cn:8888'}/file/download?type=preview&id=367` },
        { src: require('@/assets/calculation/计算器.png'), alt: '工具8', text: '工具8', link: `${process.env.VUE_APP_BASEURL || 'https://unit.sangu.js.cn:8888'}/file/download?type=preview&id=367` },
      ],
    };
  },

  methods: {
    start(){
      // this.$router.push('/conditions')
      this.showMatters = !this.showMatters
      this.active = 1
    },
    goHome(){
      this.$router.push('/home')
    },
    hoverImage(index) {
      this.hoveredIndex = index;
    },
    leaveImage(index) {
      this.hoveredIndex = null;
    },
    goToLink(link) {
      window.location.href = link;
    },
  },
}
</script>

<style scoped>

.box-card {
  margin: 10px;
}

.matters{
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中，如果需要的话 */
  width: 98%;             /* 或者你希望的特定宽度 */
  margin: 0 auto;          /* 如果设置了特定宽度，这将帮助在水平方向上居中 */
}
.item {
  margin-bottom: 30px;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  /*图片间隔*/
  gap: 30px;
}

.image-item {
  position: relative;
  transition: transform 0.2s;
}

.image-item img {
  width: 100%;
  height: auto;
  display: block;
}

.image-item:hover {
  transform: scale(1.05);
}

.image-text {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  text-align: center;
  padding: 5px 0;
  font-size: 14px;
}

.image-item[data-hovered="true"] {
  transform: scale(1.05);
}
</style>